<template>
	<view>
		<!-- filter -->
		<view class="filterWrap spaceBet">
			<view class="filterItems">
				<view class="areaView ellip">
					<select-area
						:specFlag="specFlag" 
						:needRestFlag="needRestFlag" 
						:isNeedCountryFlag="isNeedCountryFlag" 
						:province="provName" 
						:city="cityName" 
						:isHasSelFlag="isHasSelFlag"  
						@selected="selectCity"
						@resetDistrict="resetDistrict"
					></select-area>
				</view>
				<view class="iconfont icon-sanjiao"></view>
			</view>
			<view class="filterItem">
				<picker class="pickerView" @change="bindSelectFields" :value="fwFieldsIndex" :range="fwFields" range-key="name">
					<text>{{fwFields[fwFieldsIndex].name}}</text>  
					<text class="iconfont icon-sanjiao"></text> 
				</picker>
			</view>
			<view class="filterItem">
				<picker class="pickerView" @change="bindSortType" :value="sortTypeIndex" :range="sortType" range-key="name">
					<text>{{sortType[sortTypeIndex].name}}</text>  
					<text class="iconfont icon-sanjiao"></text> 
				</picker>
			</view>
		</view>
		
		<!-- list --> 
		<block v-if="isHasDataFlag">
			<list :ogzList="ogzList" :loading="loading" @goCurrPositionByDw="goCurrPositionByDw" @goOgzDet="goOgzDet"/>
		</block>
		<block v-else-if="isHasDataFlag == false">
			<no-data></no-data>
		</block>
	</view>
</template> 

<script>
	import List from './components/List'
	import { getOgzList } from '@/api/ogz/index'
	export default {
		components:{
			List
		},
		data(){
			//uni.getStorageSync('provName') uni.getStorageSync('cityName')
			return{
				provName : '河南省',
				provName_new:'河南省',
				cityName : '濮阳市',
				cityName_new:'濮阳市',
				//countryName : '县/区',
				isHasSelFlag : true,
				specFlag : false,
				isNeedCountryFlag:false,//咨询师列表不需要选择第三级
				needRestFlag:true,
				fwFields:[{id:'',name:'全部'},{id:'机关',name:'机关'},{id:'企业',name:'企业'},{id:'学校',name:'学校'},{id:'社区',name:'社区'},{id:'家庭',name:'家庭'},{id:'特殊人群',name:'特殊人群'}],
				fwFieldsIndex:0,
				fwFieldsVal:'',
				sortType:[{id:'zh',name:'综合排序'},{id:'pz',name:'品质优先'},{id:'hp',name:'好评优先'},{id:'xs',name:'销量优先'}],
				sortTypeIndex:0,
				sortTagVal:'zh',
				nowPage:1,
				loading:false,
				isHasDataFlag:null,
				ogzList:[]
			}
		},
		onLoad(){
			this.loadOgzList();
		},
		onPullDownRefresh : function(){
			this.initParams();
			uni.stopPullDownRefresh();
		},
		onReachBottom : function(){
			if( !this.loading ){
				this.loadOgzList();
			}
		},
		methods:{
			loadOgzList(){
				let { nowPage,ogzList } = this;
				this.loading = true;
				console.log(uni.getStorageSync('longitude'))
				var lon = uni.getStorageSync('longitude') == '' ? 0 : uni.getStorageSync('longitude'),
					lat = uni.getStorageSync('latitude') == '' ? 0 : uni.getStorageSync('latitude');
					//prov:this.provName_new,city:this.cityName_new,lon:lon,lat:lat,
				var field = {range:this.fwFieldsVal,sortTag:this.sortTagVal,lon:lon,lat:lat,page:this.nowPage,limit:this.limit};
				console.log(field)
				getOgzList(field).then(res=>{
					console.log(res)
					nowPage += 1;
					ogzList.push( ...res.data.datas );
					this.ogzList = ogzList;
					this.nowPage = nowPage;
					this.loading = false;
					this.isHasDataFlag = true;
				}).catch(err=>{
					this.loading = false;
					this.isHasDataFlag=false;
				});
			},
			bindSortType(e){
				this.sortTypeIndex = e.target.value;
				this.sortTagVal = this.sortType[e.target.value].id;
				this.initParams();
			},
			bindSelectFields(e){
				this.fwFieldsIndex = e.target.value;
				this.fwFieldsVal = this.fwFields[e.target.value].id;
				this.initParams();
			},
			//重置
			resetDistrict(){
				this.provName = '请选择省';
				this.provName_new = '';
				this.cityName = '市';
				this.cityName_new = '';
				this.initParams();
			},
			selectCity(e){
				this.isHasSelFlag = e.isHasSelFlag;
				this.provName = e.province;
				this.provName_new = e.province;
				this.cityName = e.city;
				this.cityName_new = e.city;
				this.initParams();
			},
			initParams(){
				this.nowPage = 1;
				this.loading = false;
				this.ogzList = [];
				this.loadOgzList();
			},
			goCurrPositionByDw(lon,lat,ogzName){
				//this.util.openMapNaviagtion(lon,lat,ogzName);
			},
			goOgzDet(id){
				uni.navigateTo({
					url:'../ogzDet/ogzDet?ogzId=' + id
				})
			}
		}
		
	}
</script>

<style lang='scss'>
	.filterWrap{
		width: 100%;
		height: 90rpx;
		background: #fff;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		.filterItems{
			width: 33%;
			margin-left: 30rpx;
			text-align: center;
			display: flex;
		}
		.filterItem{
			width: 33%;
			height: 100%;
			text-align: center;
			font-size: $font-size28;
			color: $pss-text-color3;
			.pickerView{
				height: 100%;
				line-height: 90rpx;
			}
		}
		.icon-sanjiao{
			color: $pss-text-colora;
			font-size:32rpx ;
		}
	}
	page{
		background: $pss-bg-primary;
		margin-top: 110rpx;
	}
</style>